<template>
  <div ref="raddarChartRef" :class="className" :style="{ height: height, width: width }" />
</template>

<script setup>
import * as echarts from "echarts";

const props = defineProps({
  dataArray: {
    type: Array,
    default: () => [
      {
        value: [0, 0, 0, 0, 0, 0],
        name: '男',
        itemStyle: {
            normal: {
                lineStyle: {
                    color: '#5ac6e7'
                }
            }
        },
        areaStyle: {
            color: 'rgba(70, 135, 181, 0.9)'
        }
      },
      {
        value: [0, 0, 0, 0, 0, 0],
        name: '女',
        itemStyle: {
            normal: {
                lineStyle: {
                    color: '#e27a93'
                }
            }
        },
        areaStyle: {
            color: 'rgba(221, 121, 147, 0.9)'
        }
      }
    ],
  },
  className: {
    type: String,
    default: "raddarChart",
  },
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "300px",
  }
})

const className = props.className;
const width = props.width;
const height = props.height;
const animationDuration = 3000;

const raddarChartRef = ref(null);
let myChart = null;

onMounted(() => {
  drawChart(props.dataArray)
})
  
watch(
  () => props.dataArray,
  (newValue) => {
    drawChart(newValue)
  },
)

function drawChart(dataArr) {
  let colorArr = ['#61dff9', '#eb7990'];
  myChart = echarts.init(raddarChartRef.value);
  myChart.setOption({
        tooltip: {
          showContent: true,
          position: ['right', 'top'],
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        radar: {
          radius: '55%',
          center: ['50%', '34%'],
          splitNumber: 6,
          splitArea: {
            areaStyle: {
              color: 'rgba(37, 42, 114,.3)',
              opacity: 1,
              shadowBlur: 45,
              shadowColor: 'rgba(0,0,0,.5)',
              shadowOffsetX: 0,
              shadowOffsetY: 15
            }
          },
          nameGap: 5,
          axisName: {
              textStyle: {
                  fontSize: 14
              }
          },
          indicator: [
            { text: '30以下'},
            { text: '31-35'},
            { text: '36-40'},
            { text: '41-45'},
            { text: '46-50'},
            { text: '51以上'}
          ]
        },
        color: colorArr,
        legend: {
          orient: 'vertical',
          right: 0, 
          data: ['男', '女'],
          textStyle: {
            color: '#fff'
          }
        },
        series: [{
          type: 'radar',
          symbolSize: 5,
          data: dataArr,
          animationDuration: animationDuration
        },
      ]
  });
  window.addEventListener("resize", () => {
    myChart.resize();
  });
}
</script>
